<template>
	<!--  页面切换 -->
	<div class="app_main">
		<!-- <login v-if="needLogin && !logined"></login> -->
		<!-- <unity ref="refScene" v-if="!test && ((needLogin && logined) || !needLogin)" :uinfo="uinfo"
			:asideWidth="asideWidth" @hCallOut="onUnity" pkg="uwebgl"></unity> -->
		<unity ref="refScene" :uinfo="uinfo" :asideWidth="asideWidth" @hCallOut="onUnity" pkg="uwebgl"></unity>
		<devs-2d-icon 
			v-if="devicePositions.length > 0"
			ref="ref2dIcon" 
			:devArr="devicePositions"
			@mounted="() => console.log('2D图标组件已挂载')"
			@callDev="handleDeviceClick"
			class="devs-2d-icon-container"
		></devs-2d-icon>
		<div class="main_bg"></div>
		<!-- 查看监控 -->
		<monitor ref="hk" :realplay="ws"></monitor>
		<!-- <el-nav-menu v-show="showHead && !isFullScene"></el-nav-menu> -->
		<el-nav-menu v-if="showAside"></el-nav-menu>
		<d-box ref="rePop2" :title="wtit2">
			<div class="pop_content pop_content2">
				<div class="odevInfo">
					<div class="pop_t">
					</div>
					<div class="dinfo">
						<div class="info">
							<p v-for="(value, key, index) in devInfo" :key="key">
								{{ key }}:
								<span class="f2"
									:style="{ color: index === 0 && value.includes('正常') ? colorinfo : '' }">{{ value
									}}</span>
							</p>
						</div>
					</div>
				</div>
			</div>
		</d-box>
		<el-container class="box-main" :class="{ 'hidSide': !showAside }">
			<el-main class="box-body">
				<router-view v-slot="{ Component }">
					<keep-alive :include="pages">
						<component :is="Component" ref="refPg" @call="hOnCall" />
					</keep-alive>
				</router-view>
				<el-main>
					<pop-air ref="refair"></pop-air>
					<pop-room ref="refRm" :space2="space2"></pop-room>
					<d-box ref="rePop" :title="wtit">
						<div class="pop_content">
							<div class="odevInfo">
								<div class="pop_t">
									<div class="tit" v-for="i in popTopContent">
										<span>{{ i.name }}</span>
										<span class="f2">{{ i.value }}</span>
									</div>
								</div>
								<div class="br"></div>

								<div class="pop_t" v-show="pop == 'alarm'">
									<div class="tit" v-for="i in popTopContent">
										{{ i.name }}
										<span class="f2">{{ i.value }}</span>
									</div>
								</div>

							</div>
						</div>
					</d-box>
				</el-main>
			</el-main>
			<el-footer v-show="isFullScene">Footer</el-footer>
		</el-container>
	</div>
</template>
<script setup>
import {
	computed,
	watch,
	ref,
	toRefs,
	onUnmounted,
	onMounted,
	nextTick,
	markRaw,
} from "vue";
import {
	useStore
} from "vuex";
import {
	onBeforeRouteUpdate,
	useRoute,
	useRouter
} from "vue-router";
import {
	ElMessage
} from "element-plus";
import apis from '@/api/indexapi.js';
import elNavMenu from "cmpt/el-nav-menu.vue";
import unity from "../unity/Unity3d.vue";
import monitor from "cmpt/hk/play-Pop.vue";
import dBox from "cmpt/drag-box.vue";
import popAir from "./PopAirInfo.vue";
import popRoom from "./PopRoomInfo.vue";
import callApi from "@/api/proj.js";
//import devs2dIcon from '@/views/components/devs-2d-icon.vue';
const store = useStore();
//监控状态
const {
	cam
} = callApi();
const hk = ref(null),
	ws = ref(null),
	onPlayCam = d => {
		// 确保有完整的摄像机信息
		if (d.ID && !d.SXTJSON) {
			// 通过ID获取完整的摄像机信息
			const deviceById = store.getters.monitorDeviceById(d.ID);
			if (deviceById) {
				console.log("播放前通过ID获取到摄像机完整信息:", deviceById);
				// 保留原始的code和id，但合并其他信息
				const originalCode = d.code;
				const originalId = d.id;
				// 合并设备信息
				Object.assign(d, deviceById);
				// 确保code和id不被覆盖
				d.code = originalCode;
				d.id = originalId;
			}
		}
		
		cam.play(d.SXTJSON).then(r => {
			console.log("play", r);
			hk.value.call.play(r, d.name || d.cameraName || "实时监控");
		});
	};
//请求的实例
const _api = apis();
//store.dispatch("asyncXXX",null);
//store.commit("hXXX", {});
const _useRoute = useRoute();
const _useRouter = useRouter();
const pages = computed(() => store.getters.pages);
const {
	showNav,
	showAside,
	pgCurrent,
	isFullScene,
	query,
	test,
	showHead,
	asideWidth,
	arrAirStates,
	year,
	spaceComd,
	spaceComds,
} = toRefs(store.state);

const {
	needLogin,
	logined,
	uinfo
} = toRefs(store.state.user);

const {
	space2
} = store.getters.api;

const menuItems = _useRoute.matched[0].children;

watch(logined, ld => {
	if (ld) {
		// ElMessage.success("欢迎登录合肥先导智能科技");
	}

});

const refScene = ref(null);
const spInfo = ref({}),
	showInfo = ref(false);

watch(arrAirStates, airStas => {
	if (airStas.length == 0) {
		return;
	}
	//console.log("空调状态更新", airStas.length);
	refScene.value.hModules.CallDev("SetAir", airStas);
});

//当前空间切换
const handleCommand = hcomd => {
	store.commit("hSpaceComdChange", hcomd);
}
//当前空间切换
watch(spaceComd, sp => {
	let spId = sp.id;
	if (showInfo.value) {
		hSpaceInfo(sp);
	}
	//GetAir();
});

//空间详情
const hSpaceInfo = (sp) => {
	if (showInfo.value) {
		showInfo.value = false;
		return;
	}
	let spId = sp.id;
	showInfo.value = false;
};

//每5秒更新一次状态
let h = -1;
function cItem(n, v) {
	return {
		name: n,
		value: v || ""
	}
}
const rePop = ref(null),
	popTopContent = ref([
		cItem("告警时间"),
		cItem("告警状态"),
		cItem("告警类型"),
		cItem("告警信息"),
	]),
	wtit = ref("告警详情");
watch(rePop, w => {
	w.hid();
});

//氧气设备
const rePop2 = ref(null);
const devInfo = ref({});
const wtit2 = ref("配电柜01");
watch(rePop2, w => {
	w.hid();
});
const colorinfo = ref('#FFFFFF');  // 初始颜色为白色
let prevFly;
const hOnCall = (h, d) => {
	switch (h) {
		case "clickJianKong":
			if(d){
				cam.play(d.location).then(r => {
				console.log("play", r);
				hk.value.call.play(r, d.name || d.cameraName || "实时监控");
				});		
			}
		break;
		case "hRmInfo":
			// refRm.value.show(d);
			break;
		case "ToBuildOrFlo":
			console.log("用电排名,定位楼宇或楼层", d)
			//let flo = d.name?.match(/\d{1,}[\u4e00-\u9fa5]+$/)[0]?.match(/\d{1,}/)[0];
			let b = d.name?.match(/\d{1,}[#]/)?.[0];
			let flo = d.name?.match(/\d{1,}[\u4e00-\u9fa5]+$/)?.[0]?.match(/\d{1,}/)[0];
			if (!flo && d.name.indexOf("设备层") > -1) {
				flo = 5.5;
			}
			refScene.value.hCallIn(h, {
				b: b,
				flo: [+flo]
			});

			//refScene.value.hCallIn(h, flo);

			break;
		case "hAirInfo":
			break;
		case "hRlt":
			// 场景联动 热力图   各楼层电梯间 （空调/单台空调）用电量 
			rlt.value = !rlt.value;
			//hotDat = d;
			break;
		case "hFlyTo":
			console.log("定位 ", d);
			refScene.value.hCallIn("FlyTo", {
					ID:d.id,
					scondes:"",
					enable:true,
					height: 10, //高度 默认5
					distance: 5, //距离 默认5
				});
			// store.dispatch("getSceneDev",d.id||d.name|| d.code || d.devNum || d.devnum || d.spaceCode).then(r => {
			// 	// hCallOut("hFlyTo", r);
			// 	refScene.value.hCallIn("FlyTo", {
			// 		...r,
			// 		enable: d.enable,
			// 		height: 10, //高度 默认5
			// 		distance: 5, //距离 默认5
			// 	});
			// 	if (prevFly == d.id) {
			// 		refScene.value.hCallIn("SetOpacity", 1);
			// 		prevFly = null;
			// 	} else {
			// 		prevFly = d.id;
			// 		if (!d.isRoom) {
			// 			refScene.value.hCallIn("SetOpacity", 50);
			// 		} else {
			// 			refScene.value.hCallIn("SetOpacity", 0);
			// 		}
			// 	}
			// 	//refScene.value.hCallIn("SetWallVisible", false + "");
			// })
			break;

		case "SetCurrentFloors":
			//console.log("楼层切换2", d);
			refScene.value.hCallIn(h, d);
			break;
		case "SetCurrentFloor":
			//console.log("楼层切换3", d);
			refScene.value.hCallIn("SetCurrentFloors", d);
			//refScene.value.hCallIn(h, d);
			break;
		case "hAlrmInfo": //告警信息
			rePop.value.show();
			break;
		case "OnClickDbL":
			onUnity(h, d);
			break;
		case "on2DPositions":
		console.log("home主页2d位置数据", d);
		if (d && typeof d === 'object') {
			// 确保数据是数组格式
			const positionsArray = Array.isArray(d) ? d : Object.values(d);
			if (positionsArray.length > 0) {
				// 转换数据格式为devs-2d-icon组件期望的格式
				const formattedData = positionsArray.map(item => ({
					dat: {
						id: item.id || item.devId,  // 根据实际数据结构选择正确的ID字段
						...item
					}
				}));
				console.log("转换后的2D标签数据:", formattedData);
				devicePositions.value = formattedData;
			} else {
				console.warn("2D位置数据数组为空");
			}
		} else {
			console.warn("接收到的2D位置数据格式不正确:", typeof d);
		}
		break;
		default:
			break;
	}
	//console.log("home", h, d);
};
// const apiUrlRequest = (dat) => {
// 	if (dat.iconUrl != '0' && dat.iconUrl != null) {
// 		var SXTJSON = dat.SXTJSON.split('-');
// 		let data = {
// 			"host": apiProdUrl,
// 			"dat":
// 			{
// 				urlstr: "JDBridging",
// 				"pathId": dat.iconUrl * 1,
// 				"parameter": {
// 					"ip": "http://10.30.208.254:3000",
// 					"url": "/api/Plugin.Env/Devices/GetPointsData",
// 					"method": "get",
// 					"params": {
// 						"ControllerId": 41,
// 						"DeviceId": SXTJSON[0]
// 					}
// 				}
// 			}
// 		}
// 		data.dat.parameter = JSON.stringify(data.dat.parameter)
// 		//请求数据传递
// 		_api.hDoPost(data.host, '', data.dat, (res) => {
// 			let resInfo = JSON.parse(res);
//       let resInfoFinally = JSON.parse(resInfo.data);
// 			var _obj = new Object();
//       console.log(SXTJSON);
// 			if (SXTJSON.length > 1) {
// 				console.log(resInfoFinally)
// 				_obj["status"] = resInfoFinally.list.find(item => item.key == SXTJSON[1]).val;
// 			} else {
// 				_obj["status"] = resInfoFinally.list[0].val;
// 			}
// 			_obj["Name"] = resInfoFinally.title;
// 			_obj["Id"] = dat.ID;
// 			_obj["typeId"] = dat.typeId;
// 			_obj["SubTypeId"] = dat.modelType;
// 			_obj["_Dat"] = resInfoFinally.list;
// 			console.log("传递数据",_obj)
// 			index += 1;
// 			//向unity传递数据
// 			refScene.value.hCallIn("SetjfModDat", _obj);
// 			if (index <= devList.length - 1) {
// 				apiUrlRequest(devList[index]);
// 			}
// 		})
// 	}
// 	index += 1;
// 	if (index <= devList.length - 1) {
// 		apiUrlRequest(devList[index]);
// 	}
// }
let index = 0;
let devList = [];
var cams = [];
const refPg = ref(),
	onUnity = (h, d) => {
		switch (h) {
			case "OnClickDbL":
				console.log("home主页双击事件", d);
				if (d != undefined && d) {

					onPlayCam(d);
				}
				
				break;
			case "onAllDev":
				console.log("home主页所有设备", d);
				// store.commit("hSetAllDevs", d);
				//目前只统计监控数量
				store.dispatch("updateMotiorNum", d);
				
				// 保存监控设备信息到store
				if (Array.isArray(d)) {
					// 过滤出监控设备
					const monitorDevices = d.filter(item => 
						item.modelId === 37 || 
						item.modelId === 39 || 
						item.typeId === 1 || 
						(item.type && item.type.toLowerCase().includes('camera'))
					);
					
					if (monitorDevices.length > 0) {
						console.log("保存监控设备信息，数量:", monitorDevices.length);
						store.dispatch("updateMonitorDevices", monitorDevices);
						
						// 输出第一个监控设备的关键信息
						const firstItem = monitorDevices[0];
						console.log("监控设备示例数据:");
						console.log("ID:", firstItem.ID);
						console.log("Name:", firstItem.Name);
						console.log("SXTJSON:", firstItem.SXTJSON);
						console.log("完整信息:", firstItem);
					}
				}
				
				break;
			case "OnCurrBuild":
				console.log("home主页当前建筑事件", d);
				break;
			case "ChangeSpace":
				console.log("home主页改变建筑事件", d);
				//console.log("空间切换", sp);
				// handleCommand(sp);
				break;
			case "on2DPositions":
			console.log("home主页2d位置数据", d);
				if (d && typeof d === 'object') {
					// 确保数据是数组格式
					const positionsArray = Array.isArray(d) ? d : Object.values(d);
					if (positionsArray.length > 0) {
						// 转换数据格式为devs-2d-icon组件期望的格式
						const formattedData = positionsArray.map(item => ({
							dat: {
								id: item.id || item.devId,  // 根据实际数据结构选择正确的ID字段
								...item
							}
						}));
						console.log("转换后的2D标签数据:", formattedData);
						devicePositions.value = formattedData;
					} else {
						console.warn("2D位置数据数组为空");
					}
				} else {
					console.warn("接收到的2D位置数据格式不正确:", typeof d);
				}
			break;				
			default:
				if (typeof (d) == "object") {
					refPg.value?.call?.(h, d);
				}
				break;
		}
	}

const hRefPage = () => {
	onUnity("ChangeSpace");
	return;
}

//两侧宽度控制
var stl;
watch(showAside, s => {
	if (!s) {
		if (!stl) {
			stl = document.createElement("style");
			document.head.appendChild(stl);
		}
		stl.innerText = `:root{
				--m-aside:0px !important;
			}`
	} else {
		if (stl) {
			stl.innerText = "";
		}
	}
})

onBeforeRouteUpdate((to, from) => {
	// rlt.value = false;
});

onUnmounted(() => { });

onMounted(() => nextTick(() => {
	setTimeout(() => {
		hRefPage();
	}, 100);
}));
const devicePositions = ref([]);
const ref2dIcon = ref(null);
const handleDeviceClick = (data) => {
	console.log('设备点击事件:', data);
	if (data.type === 'OnClickDbL' && data.typeId === 1) {
		var d = data;
		d.code = data.id;
		console.log("home主页双击事件", d);
		
		// 通过ID获取完整的摄像机信息
		const deviceById = store.getters.monitorDeviceById(d.ID);
		if (deviceById) {
			console.log("通过ID获取到摄像机完整信息:", deviceById);
			// 保留原始的code和id，但合并其他信息
			const originalCode = d.code;
			const originalId = d.id;
			// 合并设备信息
			Object.assign(d, deviceById);
			// 确保code和id不被覆盖
			d.code = originalCode;
			d.id = originalId;
		}
		
		if (d != undefined && d) {
			//播放rtc视频
			// PlayVideo(d.id, d.id, "");
			// d.name = cams.find(t => t.cameraIndexCode == d.code)?.cameraName;
			onPlayCam(d);
		}
	} else {
		console.log('设备信息点击事件:', data.processedInfo);
		// 更新设备信息
		// devInfo.value = {
		// 	'设备ID': data.dat?.id || '未知',
		// 	'设备类型': data.dat?.modelType === 72 ? '路由器' : '其他设备',
		// 	'设备名称': data.dat?.text || `设备${data.dat?.id}`,
		// 	'设备状态': '正常',
		// 	'位置信息': `X: ${data.pos?.x || 0},0}`,
		// 	'IP地址': data.dat?.ip || '未知',
		// 	'在线状态': data.dat?.online ? '在线' : '离线',
		// 	'安装位置': data.dat?.location || '未知',
		// 	'最后更新': new Date().toLocaleString()
		// };
		//用for解析一下
		for (let i = 0; i < data.processedInfo.length; i++) {
			devInfo.value[data.processedInfo[i].title] = data.processedInfo[i].value;
		}
		
		// 设置弹窗标题
		wtit2.value = data.buildingInfo|| '设备信息';
		
		// 显示弹窗
		if (rePop2.value) {
			rePop2.value.show();
			console.log('显示设备信息弹窗:', wtit2.value);
		} else {
			console.warn('弹窗组件引用不存在');
		}
	}
};
</script>


<style scoped="scoped" lang="scss">
.box-main,
.app_main {
	width: 100%;
	height: 100%;
	position: absolute;
}

.pop_content2 span {
	max-width: unset !important;
}

:deep(.rlt) {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	line-height: 20px;
	margin: 10px 0;
	font-size: 12px;

	span {
		height: 100%;
		padding: 2px 6px;
		display: inline-block;
		cursor: pointer;
		margin: 0 3px;
	}
}

:deep(.ryltj) {
	background: url(/imgs/hos/NYGL_yq/ryltj.png) #4AA8D130;
	background-size: calc(100% + 4px) calc(100% + 4px);
	background-position: center;
	color: #4AA8D1;
}


.pop_content {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;

	.buildInfo {
		height: 100px;
	}

	span {
		max-width: 100px;
	}

	.report {
		ul {
			max-height: 100px;
			overflow-y: scroll;
			margin: 0;
			padding: 0;
			list-style: none;

			li {
				position: relative;
				padding: 6px 0;
				margin-left: 5px;

				color: #B6D0F7;
				padding-left: 14px;
			}

			li::before {
				content: '';
				display: inline-block;
				position: absolute;
				background-color: #2FD6E9;
				border-radius: 8px;
				width: 9px;
				height: 9px;
				left: 0;
				top: 12px;
				margin-right: 10px;
			}

			li::after {
				content: "";
				position: absolute;
				width: 0px;
				height: 100%;
				border-left: 1px solid #2FD6E9;
				top: calc(50% - 6px);
				left: 4px;
			}
		}
	}

	.dinfo,
	.pop_t {

		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		justify-content: space-between;
		width: 100%;

		.tit {
			color: #B6D0F7;
		}
	}

	.br {
		height: 2px;
		background: linear-gradient(90deg, transparent, #58b5e3 50%, transparent);
		margin: 14px 0;
	}

	.iitm,
	p {
		margin: 4px 0;
		color: #B6D0F7;
		line-height: 20px;
		display: flex;
		align-items: flex-end;
		flex-direction: row;
		flex-wrap: nowrap;
	}

	.iitm {
		display: inline-block;
		margin-right: 20px;
		line-height: 50px;
	}

	.f2 {
		margin-left: 8px;
		width: 106px;
		font-family: Adobe Heiti Std;
		font-weight: normal;
		font-size: 17px;
		color: #FFFFFF;
	}
}

.spInfo {
	position: absolute;
	width: 400px;
	height: 100px;
	box-shadow: 0 0 3px 2px #33A6C1;
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	flex-wrap: nowrap;
	align-items: center;
	background: linear-gradient(to bottom, #1C3D7170, #1C3D71 70%);
	padding: 20px;
	top: 40px;
	left: 200px;

	>div {
		width: 30%;
		height: 100%;
		text-align: center;

		p {
			line-height: 26px;
		}

		.font_12 {
			margin-top: 50%;
		}

		background-size: auto 70%;
		background-position: top;
		background-repeat: no-repeat;
	}

	.num {
		color: #fff;
	}

	.mj {
		background-image: url(/imgs/home/mj.png);
	}

	.cw {
		background-image: url(/imgs/home/cw.png);
	}

	.ks {
		background-image: url(/imgs/home/ks.png);

	}
}

.main_bg {
	position: absolute;
	pointer-events: none;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	background:
		linear-gradient(90deg, #16212a, #16212aac 70%, transparent),
		linear-gradient(180deg, #304558 50%, transparent),
		linear-gradient(270deg, #16212a, #16212aac 70%, transparent);
	background-size: calc(var(--m-aside) * 1.5) 100%, 100% var(--m-head), calc(var(--m-aside) * 1.5) 100%;
	background-repeat: no-repeat;
	background-position: 0 0, 0 0, 100% 0;
}

.box-main {
	pointer-events: none;
	height: 100% !important;
	//bottom: 0;
	padding: 0 30px !important;

	>* {
		width: 100%;
		// outline: 1px solid var(--color-borer);
		overflow: hidden;
		margin: 0;
		padding: 0;
		position: relative;
	}
}

.hidSide {
	:deep(.el-aside) {
		width: 0 !important;
	}
}

.app_main:has(>.hidSide) {
	:deep(.scene-tool) {
		left: 0 !important;
		right: 0 !important;
		z-index: 2;
	}
}

.space-sel {
	color: #A7B4C6;
	position: absolute;
	height: 30px;
	line-height: 30px;
	display: flex;
	align-items: center;
	left: 20px;
	right: 20px;
	top: 50px;
	z-index: 99999;
	justify-content: space-between;
	pointer-events: none;

	* {
		color: #A7B4C6;
	}

	:deep(.el-input__wrapper) {
		background: none;
		box-shadow: none;
	}

	:deep(.el-input-number__increase),
	:deep(.el-input-number__decrease) {
		background: none;
		border: 0;

		color: #A7B4C6;
	}

	:deep(.el-input__inner) {
		color: #A7B4C6;
	}

	>div {
		display: flex;
		align-items: center;
		pointer-events: all;
	}


	.spname {
		min-width: 30px;
		text-align: center;
		display: inline-block;
		cursor: pointer;
		position: relative;
	}

	.spname::after {
		content: "▶";
		border: 1px solid #fff;
		color: #fff;
		border-radius: 14px;
		display: flex;
		width: 12px;
		height: 12px;
		flex-wrap: nowrap;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		float: right;
		font-size: 10px;
		transform: scale(0.8);
		padding: 0px 0 1px 2px;
		margin-top: 8px;
		margin-left: 6px;
	}

	.el-dropdown-link {
		margin-left: 10px;
	}

	.el-icon--right {
		color: #fff;
		font-style: normal;
		transform: scaleY(0.6);
		font-size: 12px;
	}
}

/*边框样式

background:
				linear-gradient(90deg, #304558 10px, #000 15px, transparent 50%, #304558 calc(100% - 10px)),
				linear-gradient(90deg,
					#82abd4 10px, transparent 10px, transparent 14px,
					#fff 14px, #fff 18px, transparent 18px, transparent 22px,
					#fff 22px, #fff 70px, #82abd4 70px, transparent 50%, #82abd4 calc(100% - 70px),
					#fff calc(100% - 70px), #fff calc(100% - 22px), transparent calc(100% - 22px), transparent calc(100% - 18px),
					#fff calc(100% - 18px), #fff calc(100% - 14px), transparent calc(100% - 14px), transparent calc(100% - 10px),
					#82abd4 calc(100% - 10px)),
				linear-gradient(90deg, #304558 10px, #000 15px, transparent, rgba(48, 69, 88, 0.6) 70px, transparent, #304558 calc(100% - 10px)),

				linear-gradient(180deg, #304558 10px, #000 15px, transparent 50%, #304558 calc(100% - 10px)),
				linear-gradient(180deg, transparent 8px,
					#fff 8px, #fff 52px,
					#82abd4 52px, transparent 50%, #82abd4 calc(100% - 90px),
					#fff calc(100% - 90px), #fff calc(100% - 42px),
					transparent calc(100% - 42px), transparent calc(100% - 38px),
					#fff calc(100% - 38px), #fff calc(100% - 34px),
					transparent calc(100% - 34px), transparent calc(100% - 30px),
					#82abd4 calc(100% - 30px)),
				linear-gradient(180deg, #304558 10px, #000 15px, transparent, rgba(48, 69, 88, 0.6) 70px, transparent, #304558 calc(100% - 10px)),

				linear-gradient(180deg, #304558 10px, #000 15px, transparent 50%, #304558 calc(100% - 10px)),
				linear-gradient(180deg, transparent 8px,
					#fff 8px, #fff 52px,
					#82abd4 52px, transparent 50%, #82abd4 calc(100% - 90px),
					#fff calc(100% - 90px), #fff calc(100% - 42px),
					transparent calc(100% - 42px), transparent calc(100% - 38px),
					#fff calc(100% - 38px), #fff calc(100% - 34px),
					transparent calc(100% - 34px), transparent calc(100% - 30px),
					#82abd4 calc(100% - 30px)),
				linear-gradient(180deg, #304558 10px, #000 15px, transparent, rgba(48, 69, 88, 0.6) 70px, transparent, #304558 calc(100% - 10px)),

				linear-gradient(90deg, #304558 10px, #000 15px, transparent 50%, #304558 calc(100% - 10px)),
				linear-gradient(90deg,
					#82abd4 10px, transparent 10px, transparent 14px,
					#fff 14px, #fff 18px, transparent 18px, transparent 22px,
					#fff 22px, #fff 70px, #82abd4 70px, transparent 50%, #82abd4 calc(100% - 70px),
					#fff calc(100% - 70px), #fff calc(100% - 22px), transparent calc(100% - 22px), transparent calc(100% - 18px),
					#fff calc(100% - 18px), #fff calc(100% - 14px), transparent calc(100% - 14px), transparent calc(100% - 10px),
					#82abd4 calc(100% - 10px)),
				linear-gradient(90deg, #304558 10px, #000 15px, transparent, rgba(48, 69, 88, 0.6) 70px, transparent, #304558 calc(100% - 10px));

			background-size: 100% 1px, 100% 3px, 100% 1px,
				1px 100%, 3px 100%, 1px 100%,
				1px 100%, 3px 100%, 1px 100%,
				100% 1px, 100% 3px, 100% 1px;
			background-position: 0 0, 0 1px, 0 3px,
				13px 0, 14px 0, 17px 0,
				calc(100% - 17px) 0, calc(100% - 14px) 0, calc(100% - 12px) 0,
				0 calc(100% - 38px), 0 calc(100% - 35px), 0 calc(100% - 34px);
			background-repeat: no-repeat;
*/

.box-body {
	width: 100%;
	height: 100%;
	pointer-events: none;

	:deep(>.el-container) {
		justify-content: space-between;

		pointer-events: none;

		>* {
			pointer-events: all;

		}

		>.el-main {
			pointer-events: none;

		}
	}

	:deep(.el-header) {
		z-index: 2;
	}

	:deep(.el-container),
	:deep(.el-aside),
	:deep(.el-main) {
		height: 100%;
		padding: 0;
		z-index: 0;
	}

	:deep(.el-main) {
		z-index: 1;
	}

	>* {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
</style>